<template>
  <div>
      <div class="tlite">
      <div class="header"><span class="colorg">系统设置 </span> / 消息通知</div> 
       <div class="head">消息通知</div>
      </div>
     <div class="main">
     

  <a-tabs size="large" class="tabchange" tabPosition="left" default-active-key="1"  >
      <div class="space"></div>
    <a-tab-pane  key="1" tab="代办（4）" >
     <div class="listtitle">待办（4）<span class="clear">清除未读</span></div>
     <div class="listitem">
      <a-list item-layout="horizontal" :data-source="data">
  <a-list-item slot="renderItem" slot-scope="item,">
    <a-list-item-meta
      description="你有一条新的报修工单需要处理 报修标题：下水道堵塞">
      <router-link slot="title" to="/Details">{{ item.title }} </router-link>
      
   
    </a-list-item-meta>
  </a-list-item>
</a-list>
     </div>
     </a-tab-pane>
    <a-tab-pane   key="2" tab="通知（5）">
      <div class="listtitle">待办（4）<span class="clear">清除未读</span></div>
      <router-link to="/home/messagenotification/Details"></router-link> <div class="listitem">
      <a-list item-layout="horizontal" :data-source="data">
  <a-list-item slot="renderItem" slot-scope="item,">
    <a-list-item-meta
      description="上午 10:25">
      <router-link slot="title" to="/Details">{{ item.title }} </router-link>
      
     
    </a-list-item-meta>
  </a-list-item>
</a-list>
     </div>
    </a-tab-pane>
    
  </a-tabs>
  
     
      
     </div>
  
 </div>
</template>

<script>
const data = [
{
  title: '报修工单提醒',
},
{
  title: '报修工单提醒',
},
{
  title: '报修工单提醒',
},
{
  title: '报修工单提醒',
},
];
export default {
  name: 'messagenotification',

  data() {
      return {

data
      }
      
  },

  mounted() {
      
  },

  methods: {
      
  },
};
</script>

<style lang="less" scoped>
.tlite{
  height: 148px;
  width: 100%;
  background-color: #fff;
  color: black;
  
  font-size: 14px;
}
.colorg{
  color: dimgray;
  font-size: 14px;
  padding: 0 5px;
}
.head{
  font-size: 20px;
  margin-top: 5px;
margin-left: 30px;
  font-weight: 700;
}
.header{
  padding: 25px 25px;
}
.tabchange{
 background-color: #fff;
height: 600px;
}
.main{
  margin-top: 20px;
 
}
/deep/.ant-tabs .ant-tabs-left-bar .ant-tabs-tab,.ant-tabs .ant-tabs-right-bar .ant-tabs-tab{
width: 240px;  
height: 44px;
text-align: left;
background-color: rbg(255, 255, 255, 0);
cursor: pointer;
font-size: 14px;
box-sizing: border-box;
font-weight: 400;
line-height: 32px;
}
.space{
  width: 240px;
  height: 40px;
    
}.listtitle{
  font-size: 16px;
  margin-left: 30px;
  margin-bottom: 20px;
}
.listitem{
  margin-left: 30px;
}
.txt{
  display: flex;
  flex-direction: column;
  border-bottom: 0.1px solid #666;

}span{
  color:rgb(91, 91, 91);
  font-size: 16px;
}
.clear{
  font-size: 16px;
  color:#1890FF;
  margin-left: 30px;
}

</style>